<template>

  <div class='rate-box' :style='{backgroundColor: bgColor}'>
    <img class='rate-box-before' :src="icon"></img>
    <div class='rate-box-small'>
      <div class='rate-foot'> {{ tips }}</div>
      <div class='rate-text' >{{ num }}</div>
    </div>

  </div>

</template>

<script>
export default {
  name: "ChartCard",
  props: {
    contentHeight: {
      type: Number | String,
      default: 46
    },
    title: {
      type: String,
      default: ''
    },
    num: {
      type: String,
      default: ''
    },
    tips: {
      type: String,
      default: ''
    },
    bgColor:{
      type: String,
      default: '#4D90FE'
    },
     icon:{
       type: String,
       default: ''
     },
    color:{
      type: String,
      default: '#333333'
    },


  }
}
</script>

<style lang="less" scoped>
.rate-box{
  //width: 320px;
  height: 100px;
  background: #0099ff;
  border-radius: 8px;
  box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  padding-right:40px;
  display: flex;
  justify-content: center;
  align-items: center;

  .rate-box-before{
    //position: absolute;
    //top: 50%;
    //left: 0;
    //transform: translate(-50%,-50%);
    height: 48px;
    width: 48px;
    //border: 1px solid #d9d9d9;
    border-radius: 14px;
    margin-right: 20px;
  }

  .rate-text{
    //padding-left: 40px;
    //line-height: 100px;
    font-size:30px;
    font-weight: 600;
    color: #FFF;
  }
  .rate-foot{
    //position: absolute;
    //bottom: 0;
    //right: 0;
    font-weight: 600;
    font-size:16px;
    padding: 0 24px 5px 0;
    color: #FFF;
  }

}

</style>
